// prop1.js
import { Bubble } from '../component/bubble'
import { CanvasButton } from '../component/custombutton'
export class Downgrade {
    constructor(canvas, width, height , count, continueCallback) {
        this.canvas = canvas;
        this.context = this.canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.count = count;
        this.continueCallback = continueCallback;

        this.percentage = 8 / 10;

        this.modelWidth = this.width * this.percentage;
        this.modelHeight = this.height / 2;
        this.modelX = this.width / 10;
        this.modelY = this.height / 4;

        this.size_1 = this.modelWidth * (1 - this.percentage) / 2;

        this.button = [];

        this.isAnimating = true;
        this.startTime = null; 
        
        this.iconSize = this.width * (1 - this.percentage) / 3;

        this.pigSize_up = this.size_1 * 2.5;
        this.pigX_up = this.width / 2 - this.pigSize_up - this.size_1 * 2;
        this.pigY_up = this.modelY + this.size_1 * 7;

        this.blockSize = this.size_1 * 2.5;
        this.blockX = this.width / 2 + this.size_1 * 2;
        this.blockY = this.modelY + this.size_1 * 3;

        this.bubble = new Bubble(this.context);
        this.bubbleTime = 0;
        this.knockDownTime = 100;
        this.maxBubbleSize = 100;
    }

    drawPopup() {
      this.onLoadImage(() => {
            this.drawModal();
            this.drawButton();
            this.drawAnimate();
        })
    }

    drawAnimate() {
        this.context.clearRect(this.modelX, this.modelY, this.modelWidth, this.modelHeight);
        this.drawModal();
        this.drawLeftBlock();
        this.drawRightBlock();
        if ( this.isAnimating ) {
            requestAnimationFrame(() => this.drawAnimate());
        }
    }
    
    drawRightBlock() {
        const startX = this.blockX - this.size_1 / 2;
        const startY = this.blockY;
        const endY = this.blockY + this.blockSize * 2;
        const currentY = startY + (endY - startY) * (this.bubbleTime - this.knockDownTime) / (this.knockDownTime + 25);

        if( this.bubbleTime < this.knockDownTime ) {
            this.context.drawImage(this.gold_image, this.blockX, this.blockY, this.blockSize, this.blockSize / 2); 
        } else if (this.bubbleTime >= this.knockDownTime && this.bubbleTime <= this.knockDownTime * 2 + 50) {
            if( this.bubbleTime >= this.knockDownTime && this.bubbleTime <= this.knockDownTime * 2 + 25) {
                this.context.beginPath();
                this.context.moveTo(startX, startY);
                this.context.lineTo(startX, currentY);
                this.context.lineWidth = this.size_1 / 8;
                this.context.stroke();
            } else {
                this.context.beginPath();
                this.context.moveTo(startX, startY);
                this.context.lineTo(startX, endY);
                this.context.lineWidth = this.size_1 / 8;
                this.context.stroke();
            }
        
            this.context.drawImage(this.gold_image, this.blockX, this.blockY, this.blockSize, this.blockSize / 2);

            if ( currentY >= this.blockY + this.blockSize ) {
                this.context.drawImage(this.iron_image, this.blockX, this.blockY + this.blockSize, this.blockSize, this.blockSize / 2);
            }

            if ( currentY >= this.blockY + this.blockSize * 2 ) {
        
                this.context.beginPath();
                this.context.moveTo(startX, endY);
                this.context.lineTo(startX - this.size_1 / 2, endY - this.size_1 / 2);
                this.context.moveTo(startX, endY);
                this.context.lineTo(startX + this.size_1 / 2, endY - this.size_1 / 2);
                this.context.lineWidth = this.size_1 / 8;
                this.context.stroke();

                this.context.drawImage(this.wood_image, this.blockX, this.blockY + this.blockSize * 2 , this.blockSize, this.blockSize / 2);
            }
        } else {
            this.context.drawImage(this.gold_image, this.blockX, this.blockY, this.blockSize, this.blockSize / 2); 
        }
    }

    drawLeftBlock() {
        this.context.drawImage(this.pig_background_1, this.pigX_up, this.pigY_up, this.pigSize_up, this.pigSize_up);
    
        if (this.bubbleTime > this.knockDownTime && this.bubbleTime < this.knockDownTime + 50) {
            this.bubble.drawBubble("猪神之力~", this.pigX_up + this.pigSize_up, this.pigY_up, this.maxBubbleSize);
        } else if(this.bubbleTime > this.knockDownTime * 2 && this.bubbleTime < this.knockDownTime * 2 + 50) {
            this.bubble.drawBubble("等级下降吖~", this.pigX_up + this.pigSize_up, this.pigY_up, this.maxBubbleSize);
        } else if(this.bubbleTime > this.knockDownTime * 2 + 50){
            this.bubbleTime = 0;
        }
        this.bubbleTime += 1;
    }

    drawModal() {
        this.context.drawImage(this.background_image, this.modelX, this.modelY, this.modelWidth, this.modelHeight);
       
        this.context.font = `${this.size_1}px Arial`;
        this.context.fillStyle = 'black';
        this.context.textAlign = 'center';
        this.context.fillText('降级', this.width / 2, this.modelY + this.size_1);
        
        this.context.font = `${this.size_1 * 2 / 3}px Arial`;
        this.context.fillText('随机降低木块以上等级~', this.width / 2, this.modelY + this.size_1 * 2 + this.iconSize * 2 / 3);

        this.context.font = `italic ${this.size_1 / 2}px Arial`;
        this.context.fillStyle = 'black';
        this.context.textAlign = 'left';
        this.context.fillText('(观看视频广告获取强力道具)', this.width / 4, this.height * this.percentage - this.size_1 * 5.2);
    }

    onLoadImage(callback) {
      let loadedCount = 0;
      const totalImages = 7;

      this.background_image = wx.createImage();
      this.background_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_3.png';
      this.background_image.onload = () => {
        loadedCount++;
        checkIfAllLoaded();
      };

      this.pig_background_1 = wx.createImage();
      this.pig_background_1.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/pig1.png';
      this.pig_background_1.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.gold_image = wx.createImage();
      this.gold_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/gold.png';
      this.gold_image.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.iron_image = wx.createImage();
      this.iron_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/iron.png';
      this.iron_image.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.wood_image = wx.createImage();
      this.wood_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/wood.png';
      this.wood_image.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.rebackImage = wx.createImage();
      this.rebackImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/rebackGame.png';
      this.rebackImage.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.watchAdImage = wx.createImage();
      this.watchAdImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/watchAd.png';
      this.watchAdImage.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };



      const checkIfAllLoaded = () => {
        if (loadedCount === totalImages && callback) {
          callback();
        }
      };
    }

    drawButton() {
        let _this = this;
        let reback = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/rebackGame.png",
            style: {
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 3,
                width: this.width / 2,
                height: this.size_1 * 1.5,
                backgroundColor: 'transparent'
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              button.onTap((res) => {
                  _this.isAnimating = false;
                  _this.buttonDestroy();
                  _this.count = 0;
                  _this.continueCallback(_this.count);
              })
          },
        };
        let watchAd = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/watchAd.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 5,
                width: this.width / 2,
                height: this.size_1 * 1.5,
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              _this.context.font = `italic ${_this.size_1 / 2}px Arial`;
              _this.context.fillStyle = 'black';
              _this.context.textAlign = 'left';
              _this.context.fillText('(观看视频广告获取强力道具)', _this.width / 4, _this.height * _this.percentage - _this.size_1 * 5.5);

              button.onTap((res) => {
                  _this.isAnimating = false;
                  wx.showModal({
                      title: "努力开发中噢~",
                      content: "敬请期待~"
                  });
                  _this.count = 1;
                  _this.continueCallback(_this.count);
                  _this.buttonDestroy();
              })
          },
        };
        new CanvasButton(reback);
        new CanvasButton(watchAd);
    }

    buttonDestroy() {
        this.button.forEach(bt => {
            bt.destroy();
        });
    }
}
